<template>
  <div ref="chartRef"
       class="chart"
       :style="{ height, width }" />
</template>

<script lang="ts">
import { defineComponent, ref, unref, onMounted, onUnmounted, PropType, watch } from 'vue';
import * as echarts from 'echarts';
import convertNumber from '../../libs/utils';

function formatData(arr: any) {
  if (arr) {
    const newHashArray = [];
    for (let i = 0; i < arr.length; i += 1) {
      const obj: any = {};
      const temp = arr[i];
      // if (arr[i] > 0 && arr[i] <= 1000) {
      //   arr[i] = arr[i] * 15;
      // } else if (arr[i] > 1000 && arr[i] <= 15000) {
      //   arr[i] = 15000 + arr[i] / 15;
      // }
      if (arr[i] > 1000) {
        arr[i] = 1000 + (arr[i] - 1000) / 100;
      }
      obj.value = arr[i];
      obj.formatV = temp;
      newHashArray.push(obj);
    }
    return newHashArray;
  }
}

export default defineComponent({
  props: {
    width: {
      type: String as PropType<string>,
      default: '100%',
    },
    height: {
      type: String as PropType<string>,
      default: '100%',
    },
    title: {
      type: String as PropType<string>,
      default: '',
    },
    xAxisName: {
      type: String as PropType<string>,
      default: '位点',
    },
    yAxisName: {
      type: String as PropType<string>,
      default: '覆盖深度',
    },
    value: {
      type: Object as PropType<{ x: string[]; y: string[] }>,
      default: {},
    },
    // type === 'special' 纵坐标做缩放处理
    type: {
      type: String as PropType<string>,
      default: '',
    },
  },

  setup(props) {
    const chartRef = ref();
    let chartInstance: any = undefined;
    const option = {
      title: {
        text: props.title,
        left: 'center',
      },
      tooltip: {
        trigger: 'axis',
        formatter: (val: any) =>
          `${props.xAxisName}:  ${convertNumber(val[0].name)}<br/>${val[0].marker}${
            props.type === '' ? val[0].data : val[0].data.formatV
          }`,
        extraCssText: 'max-width: 150px',
      },
      xAxis: {
        name: props.xAxisName,
        type: 'category',
        data: props.value.x,
        splitNumber: 30,
        axisLabel: {
          show: props.type === 'special' ? false : true,
          formatter: (item: any) => convertNumber(item),
        },
        axisTick: {
          show: props.type === 'special' ? false : true,
        },
      },
      yAxis: {
        name: props.yAxisName,
        type: 'value',
        splitLine: {
          show: false,
        },
        axisLabel: {
          formatter: (v: number) => {
            let item;
            if (props.type === 'special' && v > 1000) {
            } else {
              item = v;
            }
            return item;
          },
        },
      },
      series: [
        {
          type: 'bar',
          data: [],
          symbol: 'none',
          itemStyle: { color: 'rgba(217, 84, 77, 1)' },
        },
      ],
    };

    onMounted(() => {
      chartInstance = echarts.init(unref(chartRef));
      Object.assign(option.series[0], {
        data: props.type === '' ? props.value.y : formatData(props.value.y),
      });
      chartInstance.setOption(option);
      window.onresize = () => {
        chartInstance.resize();
      };
    });

    onUnmounted(() => {
      window.onresize = null;
    });

    watch(props, () => {
      const data = JSON.parse(JSON.stringify(props.value.y));
      Object.assign(option.series[0], {
        data: props.type === '' ? props.value.y : formatData(data),
      });
      Object.assign(option.xAxis, { data: props.value.x });
      chartInstance.setOption(option);
      window.onresize = () => {
        chartInstance.resize();
      };
    });

    return {
      chartRef,
    };
  },
});
</script>

<style lang="less" scoped>
/** chat 表格宽度自适应 */
.chart {
  :deep(div) {
    width: 100% !important;
  }

  :deep(canvas) {
    width: 100% !important;
  }
}
</style>